<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul></ul>

    <h3>2222222</h3>

    <script>

        // 动态生成100个li  ?

        var oUl = document.querySelector('ul') ;

        // for(var i = 0 ; i < 100 ; i++) {
        //     var oLi = document.createElement('li') ;
        //     oLi.innerHTML = i + 1 ;
        //     // 如果一次一次的插入  回流100次
        //     // oUl.appendChild(oLi);
        // }    



        // 文档碎片              创建文档碎片    
        //    相当于是一个隐形的标签
        var fragment = document.createDocumentFragment() ;
        // var div = document.createElement('div') ;
        for(var i = 0 ; i < 100 ; i++) {
            var oLi = document.createElement('li') ;
            oLi.innerHTML = i + 1 ;
            // 把生成的Li存入文档碎片
            fragment.appendChild(oLi);
            // div.appendChild(oLi) ;
        }    
        // 文档碎片插入到ul
        oUl.appendChild(div);


    </script>
    
</body>
</html>